<docs>
  ## 缴费银行变更
</docs>
<template>
  <div class="fixedBox">
    <mheader type="index" @back_btn="goBack()" title="缴费银行变更"></mheader>
    <!-- 选择地区开始 -->
    <div class="choice">
      <co-form :model="data" :rules="rules" ref="form">
        <co-select
          prop="xghjfyh"
          label="缴费银行"
          v-model="data.xghjfyh"
          :list="yhList"
          attrid="dmid"
          attrname="dmmc"
        ></co-select>
        <co-input prop="xghyhkh" label="银行卡号" max-length="32" v-model="data.xghyhkh" placeholder="请输入"></co-input>
        <co-upload label="银行扣款协议" ref="uploadWrap1"></co-upload>
        <co-upload label="银行卡带卡号面" ref="uploadWrap2"></co-upload>
        <div class="_tip">请平铺拍照或扫描图片，确保上传图片清晰完整。</div>
      </co-form>
    </div>

    <!-- 确定-->
    <div class="next-step">
      <button class="btn btn-primary" @click="dataSave()">确认变更</button>
    </div>
    <!-- 手机校验 -->
    <message-card :visible.sync="save.visible"
    :title="save.title" :btn-text="save.btnText"
    :btn-type="save.btnType" @btnClick="msgBtn" @iconCloseClick="iconCloseClick"
    :type="save.type=='success' ? 'success' : (save.type=='email'?'email':'fail')">
      <div class="_iphone">
        <co-input
          label="手机号"
          v-model="sjhm"
          @input="changePhone"
          placeholder="请输入"
        ></co-input>
        <div class="clearfix">
          <co-input
            style="width:70%;"
            class="left"
            label="短信验证码"
            max-length="4"
            v-model="sjyzm"
            placeholder="请输入"
            :disabled="yzmDisabled"
          ></co-input>
          <button
            type="button"
            style="width:30%;margin-top:0.25rem;"
            class="left btn btn-primary"
            @click="get_yzm"
            :disabled="disabled"
          >{{yzmCode}}</button>
        </div>
      </div>
    </message-card>
  </div>
</template>
<script>
import Mheader from "@/ldry/group/mheader/mheader";
import coForm from "@/base/form/form";
import coInput from "@/base/form/input";
import coSelect from "@/base/form/select";
import coUpload from "@/base/upload/upload";
import $ from "common/js/axios";
import { validator } from "common/js/valid";
import { mixinValid } from "common/mixins/mixins";
import MessageCard from "@/ldry/group/messageCard/messageCard";

export default {
  components: { coForm, MessageCard, coInput, coSelect, coUpload, Mheader },
  name: "reverseOne",
  mixins: [mixinValid],
  data() {
    return {
      yzmCode: "获取验证码",
      yzmDisabled:true,
      disabled: true,
      sjhm:"",
      sjyzm:"",
      save: {
        type: "email",
        btnText: "确定",
        btnType: "primary",
        title: "手机验证",
        visible: true
      },
      data: {
        xghjfyh: "",
        xghyhkh: "",
        yhkkxy_id:"",
        yhkdkhtp_id:""
      },
      rules: {
        xghjfyh: validator('128,"full","缴费银行",false'),
        xghyhkh: validator('32,"number","银行卡号",false')
      },
      msgTitle: "",
      yhList: []
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    init() {
      $.get("/dafwgl/dmb/dmb", {
        params: {
          dmbm: "rsdagl_ld_d_khyh"
        }
      }).then(res => {
        let _res = res.returnData;
        if (+_res.executeResult == 1) {
          this.yhList = _res.rsdagl_ld_d_khyh;
          this.echo();
        } else {
          this.$alert({
            type: "warning",
            message: _res.message
          });
          return false;
        }
      });
    },
    echo(){
      $.get('/dafwgl/personal/xxxg').then((res)=>{
        let _res = res.returnData;
        if(+_res.executeResult == 1){
          var _data = _res.cbxx;
          this.data.xghjfyh = _data.jfyh;
          this.data.xghyhkh = _data.yhkh;
        }else{
          this.$alert({
            type: 'warning',
            message:_res.message
          });
          return false;
        }
      }).finally();
    },
    dataSave() {
      var _this = this;
      this.$refs.form.validate(val => {
        if (_this.$refs.uploadWrap1.tpid == "") {
          _this.$alert({
            type: "warning",
            message: "请上传银行扣款协议"
          });
          return false;
        }
        if (_this.$refs.uploadWrap2.tpid == "") {
          _this.$alert({
            type: "warning",
            message: "请上传银行卡带卡号面"
          });
          return false;
        }
        this.data.yhkkxy_id = this.$refs.uploadWrap1.tpid;
        this.data.yhkdkhtp_id = this.$refs.uploadWrap2.tpid;
         this.$loading = true;
        $.post("/dafwgl/bxxxxg/jfyhxxxgBc", this.data).then(res => {
          let _res = res.returnData;
          if (+_res.executeResult == 1) {
            this.$alert({
              type: "success",
              message: "操作成功!",
              cb:function(){
                _this.goBack();
              }
            });
          } else {
            this.$alert({
              type: "warning",
              message: _res.message
            });
            return false;
          }
        }).finally(() => {
          this.$loading = false;
        });;
      });
    },
    // 获取验证码
    get_yzm() {
      var _flag = 1
      var exc = /^1\d{10}$/;
      if (!exc.test(this.sjhm)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      if (_flag != 1) return
      $.get("/dafwgl/personal/fsdx", {
        params: {
          ylsjh: this.sjhm,
          code:'1'
        }
      })
        .then(res => {
          _flag = 0
          let _res = res.returnData;
          if (+_res.executeResult == 0) {
            this.$alert({
              type: "warning",
              message: _res.message
            });
            return false;
          }
          this.timeout();
        })
        .finally();
    },
     timeout() {
      let count = 60;
      let _this = this;
      _this.disabled = true;
      var countdown = setInterval(function() {
        _this.yzmCode = count + "s";
        if (count == 0) {
          _this.yzmCode = "发送验证码";
          _this.disabled = false;
          clearInterval(countdown);
        }
        count--;
      }, 1000);
    },
    // 输入手机校验预留手机方法
    changePhone(){
      if (this.sjhm.length < 11) return
      var exc = /^1\d{10}$/;
      if (!exc.test(this.sjhm)) {
        this.$alert({
          type: "warning",
          message: "手机号码格式不正确!"
        });
        return;
      }
      var _flag = 1
      if(_flag != 1) return
      $.post('/dafwgl/personal/checkSjh',{ylsjh: this.sjhm}).then((res) => {
        var data = res.returnData;
        _flag = 0
        if (data.executeResult == '0') {
          this.$alert({
            type: "warning",
            message: data.message
          });
          return;
        }else{
          this.disabled = false;
          this.yzmDisabled = false;
         }
      }).catch(() => {});
    },
    // 消息按钮点击处理
    msgBtn() {
      var _this = this
      if (this.sjyzm == "") {
        this.$alert({
          type: "warning",
          message: "验证码不能为空!"
        });
        return
      }
      if(this.save.type == 'email'){
        if (this.sjyzm.length < "4") {
          this.$alert({
            type: "warning",
            message: "验证码长度必须是4位!"
          });
          return
        }
        let _data = {
          ylsjh:this.sjhm,
          sjyzm:this.sjyzm
        }
        var _flag = 1
        if(_flag != 1) return
        $.post('/dafwgl/personal/checkSjyzm',_data).then((res) => {
          _flag = 0
          var data = res.returnData;
          if (data.executeResult == '0') {
            this.$alert({
              type: "warning",
              message: data.message
            });
            return;
          }else{
            _this.save.visible = false;
            _this.yzmCode = "发送验证码";
          }
        }).catch(() => {});
      }
    },
    // 点击×返回到首页
    iconCloseClick() {
      if (this.save.type == "email") {
        this.$router.push({ name: "dbbgdbbg" });
      }
    },
  },
  created() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
@import "~common/scss/variable.scss";
.choice {
  border: $border;
  padding-left: $padding-base;
  padding-bottom: $padding-base;
  background-color: #fff;
  border: $border;
  box-sizing: border-box;
}
.next-step {
  margin-top: $margin-base * 3;
  width: 100%;
  box-sizing: border-box;
  padding: $padding-base;
  .btn {
    width: 100%;
  }
}
._tip {
  font-size: 0.41444rem;
  text-align: center;
  color: #ffa149;
}
</style>
